Step 3 - Use keyboard keys to navigate in the air conditioning settings

In this step you create keyboard navigation for the Driver and Passenger application screens and use keys to set the values of the sliders which control the air conditioning temperature.

Create keyboard navigation between the Driver and Passenger screens

In this section you create keyboard navigation to switch between the Driver and Passenger application screens.

To create keyboard navigation between the Driver and Passenger screens:

  1. In the Project > RootPage > Home > AirCondition select the Driver node and in the Node Components click Add new trigger for Key Down.
  2. In the Trigger Condition Editor add a condition to set off the trigger when the user presses the → (Right Arrow) key.

    When a subpage of a parent page is active, the parent page is also active. When you press the Enter key to navigate to the Driver node, the AirCondition node is activated, and the application executes the JavaScript script which sets focus to the Driver node. Because the focus is on the Driver node, you can use the → (Right Arrow) key on your keyboard to navigate to the Passenger node.

  3. Add to the trigger an Execute Script action, create a script, and in the Script Editor use this script:
    // Get the Page node Driver.
var driverPage = node.lookupNode('#Driver');
// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
var driverActive = driverPage.getProperty('Page.State');

var passengerPage = node.lookupNode('#Passenger');
var passengerActive = passengerPage.getProperty('Page.State');

// Check whether the Page node Driver node is active and if it is navigate to the Passenger page.
if (driverActive == 1)
{
    passengerPage.navigateToThisPage()
}

    You use this script to navigate from the Driver to the Passenger screen in the application.

  4. In the Project > RootPage > Home > AirCondition select the Driver node, in the Node Components add another Key Down trigger.
    You use this trigger to navigate from the Passenger to the Driver screen.
  5. In the Trigger Condition Editor set the trigger to be set off when the user presses the ← (Left Arrow) key.

  6. Add to the trigger an Execute Script action, create a script, and in the Script Editor use this script:

    // Get the Page node Passenger.
var passengerPage = node.lookupNode('#Passenger');
// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
var passengerActive = passengerPage.getProperty('Page.State');

var driverPage = node.lookupNode('#Driver');

// Check if the Page node Passenger node is active and if it is navigate to the Driver page.
if (passengerActive == 1)
{
    driverPage.navigateToThisPage();
}

    You use this script to navigate from the Passenger to the Driver screen.

    In the Preview in the AirCondition screen use the → (Right Arrow) and ← (Left Arrow) keys to navigate between the Driver and Passenger screens.

Set keyboard keys to move a slider

In this section you create keyboard navigation to set the values of the sliders which control the air conditioning temperature.

To set keyboard keys to move a slider:

  1. In the Project > RootPage > Home > AirCondition select the Driver node and in the Node Components click Add new trigger for Key Down to add a Key Down trigger.
    You use this trigger to set focus to the Slider 2D node in the Driver node.
  2. In the Trigger Settings Editor add a condition to set off the trigger when the user presses the ↑ (Up Arrow) key.

  3. Add to the trigger an Execute Script action, create a script, and in the Script Editor use this script:

    // Get the Page node Passenger.
var passengerPage = node.lookupNode('#Passenger');
// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
var passengerActive = passengerPage.getProperty('Page.State');

var driverPage = node.lookupNode('#Driver');
var driverActive = driverPage.getProperty('Page.State');

// Get the Slider 2D node on the Driver screen.
var driverSlider = node.lookupNode('#DriverSlider');
// Get the Slider 2D node on the Passenger screen.
var passengerSlider = node.lookupNode('#PassengerSlider');

// Check if the Page node Driver is active, and if it is set focus to the Slider 2D node in that node.
if (driverActive == 1)
{
    driverSlider.trySetFocus();
}
// If the Page node Passenger is active, set the focus to the Slider 2D node in that node.
else if (passengerActive == 1)
{
    passengerSlider.trySetFocus();
}

    You use this script to set focus to the slider in the Driver application screen, if that screen is open, or to the slider on the Passenger application screen, if that screen is open, when the user presses the ↑ (Up Arrow) key.

  4. In the Project > RootPage > Home > AirCondition select the Driver node, in the Node Components right-click the Key Down trigger, and select Copy.
    You use the same trigger for the Passenger node to set focus to the Slider 2D node on that application screen when the user presses the ↑ (Up Arrow) key.
  5. In the Project > RootPage > Home > AirCondition select the Passenger node, in the Node Components right-click, and select Paste Trigger.
  6. In the Project select the Driver > Slider 2D node and in the Node Components click Add new trigger for Key Down.
    You use this trigger to set the focus from the Slider 2D node back to the Driver node.
  7. In the Trigger Settings Editor add a condition to set off the trigger when the user presses the ↓ (Down Arrow) key.
  8. Add to the trigger an Execute Script action, create a script, and in the Script Editor use this script:
    // Get the Page node Driver.
var driverPage = node.lookupNode("#Driver");
// The value of the Page.State property tells whether the Page or Page Host node is active:
// - If the value is 0, the node is inactive and invisible.
// - If the value is 1, the node is active and visible.
var passengerPage = node.lookupNode("#Passenger");

// Get the Slider 2D node on the Driver screen.
var driverSlider = node.lookupNode('#DriverSlider');
// Get the Slider 2D node on the Passenger screen.
var passengerSlider = node.lookupNode('#PassengerSlider');

// Get the node which has focus.
var nodeInFocus = getFocusedNode();

// Check if the Slider 2D node on the Driver screen has focus, and if it does set focus to the Page node Driver.
if (nodeInFocus == driverSlider)
{
    driverPage.trySetFocus();
}
// If the Slider 2D node on the Passenger screen has focus, set focus to the Page node Passenger.
else if (nodeInFocus == passengerSlider)
{
    passengerPage.trySetFocus();
}

    You use this script to set focus to the Driver node if the slider on the Driver application screen has focus, or on the Passenger node if the slider on the Passenger application screen has focus, when the user presses the ↓ (Down Arrow) key.

  9. In the Project > RootPage > Home > AirCondition > Driver select the Slider 2D node, in the Node Components right-click the Key Down trigger, and select Copy.
  10. In the Project > RootPage > Home > AirCondition > Passenger select the Slider 2D node, in the Node Components right-click, and select Paste Trigger.
    You use the same trigger for the Slider 2D node on the Page node Passenger to set the focus back to that Page node.

Show when a slider is focused

In this section you create visualization which shows the user when the sliders are focused.

To show when a slider is focused:

  1. In the Project > Prefabs select the Slider 2D prefab and in the State Tools click Create State Manager.
    Kanzi Studio creates a state manager and assigns it to the Slider 2D prefab.
    When you edit the nodes in a prefab or any of its instances in a project, you change those nodes in all instances of that prefab. The Slider 2D nodes in the Page nodes Driver and Passenger now both use the state manager you created.
  2. In the State Tools click Create State twice to create two states, double-click the name of each state, and rename the states to NotFocused and Focused.
    The NotFocused state defines the state of your application when one of the sliders is not focused and the Focused state when one of the sliders is focused.
  3. In the Project > Prefabs > Slider 2D > Trajectory Layout 2D select the Knob node and in the Properties set the Image property to Knob_Active.png.
    You use the image to indicate when a slider is focused.
  4. In the State Tools click below the Focused state to save the current image to that state.
    You display a different image of the slider knob when the slider is focused.
  5. In the Project > Prefabs > Slider 2D > Trajectory Layout 2D select the Knob node, in the Properties set the Image property to Knob.png, and in the State Tools click below the NotFocused state to save the current image to that state.
  6. In the State Tools click the <No Controller Property> dropdown menu and select the Node > Focused property.
    When you set the Focused property as the controller property for the state manager that controls the states of the sliders, the state manager transitions to a state based on the value of that property. When a slider is in focus, the appearance of the slider knob changes.
  7. In the State Tools under the Focused state set the value of the Focused property to True.
  8. In the State Tools click Any -> Any to open the State Transition Editor and in the State Transition Editor set the Duration to 0.
    You set the state transition for the slider knob to happen immediately when the user presses the ↑ (Up Arrow) key on their keyboard.
  9. In the State Tools click Edit State Manager to deactivate the State Tools.

When the Page node Driver is active, use the → (Right Arrow) and ← (Left Arrow) keys to navigate between the Driver and Passenger screens. To adjust the slider values, press the ↑ (Up Arrow) key to set focus to the Slider 2D node, and use the → (Right Arrow) and ← (Left Arrow) keys to set the slider value. Press the ↓ (Down Arrow) key to set the focus back to the Page nodes Driver or Passenger.

Organize the script files in your Kanzi Studio project

In this section you rename the scripts you created in this step of the tutorial and create folders for those scripts.

To organize the script files in your Kanzi Studio project:

  1. In the Library > Resource Files > Scripts rename:
  2. In the Library > Resource Files > Scripts drag the scripts to the AirCondition folder.

< PREVIOUS STEP
NEXT STEP >

Open topic with navigation